<template>
    <headerTitle title="登录"></headerTitle>
    <div class="wrapper">
        <div id="login">
            <ul class="form-box">
                <li>
                    <div class="title">
                        手机号码：
                    </div>
                    <div class="content">
                        <input type="text" placeholder="手机号码" v-model="phoneNumber">
                    </div>
                </li>
                <li>
                    <div class="title">
                        密码：
                    </div>
                    <div class="content">
                        <input type="password" placeholder="密码" v-model="password">
                    </div>
                </li>
            </ul>
            <tipBox :tips="tips"></tipBox>
            <div class="button-login">
                <button @click="login()">登陆</button>
            </div>
            <div class="button-register">
                <button @click="register()">去注册</button>
            </div>
        </div>
    </div>
    <mainFooter></mainFooter>
</template>

<script setup>
import mainFooter from '@/components/mainFooter.vue';
import headerTitle from '@/components/headerTitle.vue';
import tipBox from '@/components/tipBox.vue';
import { ref } from 'vue'
import { loginRequest } from '@/js/request.js'
import { useRouter } from "vue-router";
import data from '@/js/data';
import { isNotEmptyStr } from '@/js/util';

const router = useRouter();

let phoneNumber = ref(null)
let password = ref(null)
let tips = ref(null)
let login = () => {
    if (isNotEmptyStr(phoneNumber.value) && isNotEmptyStr(password.value)) {
        loginRequest((respon) => {
            if (respon.data.code == 200) {
                data.setCache("Authorization", respon.data.detail.JWT)
                router.push({ name: 'businessClassificationPage' })
            } else {
                tips.value = '账号或密码不正确'
            }
        }, phoneNumber.value, password.value)
    } else {
        tips.value = "请完整的输入信息"
    }

}
let register = () => {
    router.push({ name: 'registerPage' })
}
</script>

<style lang="scss" scoped>
.wrapper {
    margin-top: 14vw;

    .form-box {
        width: 100%;
        margin-top: 12vw;

        li {
            box-sizing: border-box;
            padding: 4vw 3vw 0 3vw;
            display: flex;
            align-items: center;

            .title {
                flex: 0 0 18vw;
                font-size: 3vw;
                font-weight: 700;
                color: #666;
            }

            .content {
                flex: 1;

                input {
                    border: none;
                    outline: none;
                    width: 100%;
                    height: 4vw;
                    font-size: 3vw;
                }
            }

        }
    }


    .button-login {
        width: 100%;
        box-sizing: border-box;
        padding: 4vw 3vw 0 3vw;

        button {
            width: 100%;
            height: 10vw;
            font-size: 3.8vw;
            font-weight: 700;
            color: #fff;
            background-color: #38CA73;
            border-radius: 4px;

            border: none;
            outline: none;
        }
    }

    .button-register {
        width: 100%;
        box-sizing: border-box;
        padding: 4vw 3vw 0 3vw;

        button {
            width: 100%;
            height: 10vw;
            font-size: 3.8vw;
            font-weight: 700;
            /*与上面登陆按钮不同的只有颜色、背景色、边框不同*/
            color: #666;
            background-color: #EEE;
            border: solid 1px #DDD;
            border-radius: 4px;

            border: none;
            outline: none;
        }
    }
}
</style>